<template>
	<view class="cleaner">
		<view class="top">
			<u-swiper :list="Cleaner.images" height="751"></u-swiper>
			<view class="icons one" @click="ToHome">
				<u-icon name="arrow-left" size="40rpx" color="#FFF" />
			</view>
			<view class="icons two" @click="doCollect">
				<image class="image" src="/static/image/bj01.png" />
			</view>
			<view class="icons three">
				<button open-type="share" class="sharebtn"></button>
				<image class="image" src="/static/image/bj02.png" />
			</view>
		</view>

		<view class="title common">
			<view class="left">
				<view class="name">{{ Cleaner.name }}</view>
				<view class="time">
					<view class="tip">今日可约</view>
					<view class="tip2">{{Cleaner.works_times}}</view>
				</view>
			</view>
			<view class="right">
				<u-icon class="icon-location" name="map-fill" size="32rpx" color="#01C3A8" />
				<view class="km">{{ (Cleaner.distance / 1000).toFixed(1) || ''}}Km</view>
			</view>
		</view>

		<view class="true-name common">
			<view class="left">
				<u-icon v-if="Cleaner.is_real == 0" class="icon-checked" name="close-circle-fill" size="22rpx"
					color="#ea6b5b" />
				<u-icon v-else class="icon-checked" name="checkmark-circle-fill" size="22rpx" color="#EAD2AF" />
				<view class="text">{{ Cleaner.is_real == 0 ? '未实名认证' : '实名认证'}}</view>
				<view class="text">{{ Cleaner.home_city || ''}}人</view>
				<view class="text">{{ Cleaner.age  || ''}}岁</view>
			</view>
			<!-- 收藏 -->
			<view class="right" @click="getCollection">{{Cleaner.is_collection == 0 ? '收藏' : '已收藏'}}</view>
		</view>
		<view class="hr"></view>

		<view class="info common">
			<view class="item">
				<view class="ask">属相</view>
				<view class="answer">{{ Cleaner.animals }}</view>
			</view>
			<view class="item">
				<view class="ask">星座</view>
				<view class="answer">{{ Cleaner.constellation }}</view>
			</view>
			<view class="item">
				<view class="ask">民族</view>
				<view class="answer">{{ Cleaner.notion }}</view>
			</view>
			<view class="item">
				<view class="ask">学历</view>
				<view class="answer">{{ Cleaner.education }}</view>
			</view>
			<view class="item">
				<view class="ask">身高</view>
				<view class="answer">{{ Cleaner.height }}</view>
			</view>
			<view class="item">
				<view class="ask">体重</view>
				<view class="answer">{{ Cleaner.weight }}</view>
			</view>
		</view>

		<view class="introduction common">
			{{ Cleaner.introduction }}
		</view>
		<view class="functions common">
			<view class="item">
				<u-icon v-if="Cleaner.is_auth == 0" class="icon-checked" name="close-circle-fill" size="22rpx"
					color="#ea6b5b" />
				<u-icon v-else class="icon-checked" name="checkmark-circle-fill" size="22rpx" color="#EAD2AF" />
				<view class="text">商家认证</view>
			</view>
			<view class="item">
				<u-icon v-if="Cleaner.is_real == 0" class="icon-checked" name="close-circle-fill" size="22rpx"
					color="#ea6b5b" />
				<u-icon v-else class="icon-checked" name="checkmark-circle-fill" size="22rpx" color="#EAD2AF" />
				<view class="text">实名认证</view>
			</view>
			<view class="item">
				<u-icon v-if="Cleaner.is_self == 0" class="icon-checked" name="close-circle-fill" size="22rpx"
					color="#ea6b5b" />
				<u-icon v-else class="icon-checked" name="checkmark-circle-fill" size="22rpx" color="#EAD2AF" />
				<view class="text">头像验真</view>
			</view>
			<view class="item" @click="ToAuthentic">
				<view class="text">查看
					<u-icon name="arrow-right" size="22rpx" />
				</view>
			</view>
		</view>

		<view class="bgm"></view>

		<view class="service common">她服务的项目</view>

		<view class="tags common">
			<view class="one" :class="{tagactive:tagis == true }" @click="tagOne">全部</view>
			<view class="two" :class="{tagactive:tagis == false}" @click="tagTwo">
				<img src="/static/image/time.svg" alt="" class="timesvg">
				<view class="text">日常保洁</view>
			</view>
		</view>

		<!-- 全部 -->
		<view class="projectone" v-if="tagis">
			<view class="project common" v-for="(item,index) in Cleaner.product" :key="index" @click="Todetail(item)">
				<image class="left img" :src="item.child[0].image" mode="aspectFill" />
				<view class="right">
					<view class="top">
						<view class="top1">{{item.child[0].title}}
							<u-icon name="arrow" />
						</view>
						<view class="top2">{{ item.child[0].description}}</view>
						<view class="top3">已售{{item.child[0].people}}万｜上门服务</view>
					</view>
					<view class="bottom">
						<view class="left">
							<text class="left1">{{item.child[0].price}}元</text>
							<text class="left2">/小时</text>
						</view>
						<view class="right">立即预约</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日常保洁 -->
		<view class="projecttwo" v-else>
			<view class="project common" v-for="(item,index) in Cleanertwo" :key="index" @click="Todetail(item)">
				<image class="left img" :src="item.child[0].image" mode="aspectFill" />
				<view class="right">
					<view class="top">
						<view class="top1">{{item.child[0].title}}
							<u-icon name="arrow" />
						</view>
						<view class="top2">{{ item.child[0].description}}</view>
						<view class="top3">已售{{item.child[0].people}}万｜上门服务</view>
					</view>
					<view class="bottom">
						<view class="left">
							<text class="left1">{{item.child[0].price}}元</text>
							<text class="left2">/小时</text>
						</view>
						<view class="right">立即预约</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { ResCleaner, ResCollection, ResOffCleaner } from '@/untils/api.js'
	export default {
		data() {
			return {
				Cleaner: {},
				Cleanertwo: [],
				tagis: true,
				CleidObj: {}

			}
		},
		onLoad(option) {
			this.CleidObj = option
			this.getCleaner(option)
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '保洁', //分享的名称
				path: '/pages/Home/Cleaner',
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '保洁',
				type: 0,
				summary: "",
				imageUrl: ''
			}
		},
		methods: {
			ToAuthentic() {
				let ticObj = {
					name: this.Cleaner.name,
					image: this.Cleaner.qualification
				}
				uni.navigateTo({
					url: `/pages/Cleaner/Authentic?data=${JSON.stringify(ticObj)}`
				})
			},
			Todetail(item) {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${item.child[0].id}`
				})
				uni.setNavigationBarTitle({
					title: item.child[0].title
				})
			},
			doCollect() {
				uni.navigateTo({
					url: '/pages/My/Collect'
				})
			},
			// 0未收藏 1已收藏
			async getCollection() {
				let idObj = { id: this.Cleaner.id }
				if (this.Cleaner.is_collection == 0) {
					const { data: res } = await ResCollection(idObj)
					uni.$showMsg(res.msg)
					this.getCleaner(this.CleidObj)
				} else if (this.Cleaner.is_collection == 1) {
					const { data: res } = await ResOffCleaner(idObj)
					uni.$showMsg(res.msg)
					this.getCleaner(this.CleidObj)
				}

			},
			tagOne() {
				this.tagis = true
				console.log(1);
			},
			tagTwo() {
				this.tagis = false

			},
			async getCleaner(id) {
				const { data: res } = await ResCleaner(id)
				this.Cleaner = res.data

				this.Cleanertwo = this.Cleaner.product.filter(item => {
					return item.name === '家具保养'
				})

				console.log(res, '技师详情');
			},
			ToHome() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common {
		padding: 0 26rpx;
		box-sizing: border-box;
	}

	.cleaner .top {
		position: relative;
	}


	.cleaner .icons {
		width: 68rpx;
		height: 68rpx;
		background: #212121;
		opacity: 0.88;
		position: absolute;
		top: 130rpx;
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		line-height: 68rpx;
	}

	.cleaner .icons .image {
		width: 68rpx;
		height: 68rpx;
	}

	.one {
		left: 38rpx;
		line-height: 77rpx !important;
	}

	.two {
		left: 564rpx;


	}

	.three {
		left: 652rpx;
		position: relative;

		.sharebtn {
			width: 80rpx;
			height: 80rpx;
			opacity: 0.1;
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx 0;
		padding-right: 40rpx;
	}

	.title .left {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title .name {
		height: 53rpx;
		font-size: 38rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #090909;
		line-height: 53rpx;
		letter-spacing: 1px;
		margin-right: 17rpx;
	}

	.title .time {
		width: 175rpx;
		height: 33rpx;
		border-radius: 3rpx;
		border: 1rpx solid #01C3A8;
		display: flex;
		justify-content: space-between;
	}

	.title .time .tip {
		width: 105rpx;
		height: 29rpx;
		line-height: 26rpx;
		text-align: center;
		background: #D6FFF9;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #01C3A8;
	}

	.title .time .tip2 {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #01C3A8;
		margin: 0 auto;
	}

	.title .right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title .right .km {
		width: 96rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C0C0C;
	}

	.true-name {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.true-name .left {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.true-name .left .text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5E523F;
		margin-right: 22rpx;
	}

	.true-name .right {
		width: 132rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		background-color: #01C3A8;
		border-radius: 29rpx;
		padding: 0;
		color: #D1FFF9;
		font-weight: 400;
		font-family: PingFangSC-Regular, PingFang SC;
		font-size: 24rpx;
	}


	.hr {
		border-bottom: 1rpx solid #E7E7E7;
		margin: 20rpx 26rpx 56rpx;
	}

	.info {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.info .item {
		width: 33.33%;
		display: flex;
		justify-content: left;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.info .item .ask {
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
		letter-spacing: 1px;
		margin-right: 20rpx;
	}

	.info .item .answer {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C0C0C;
	}

	.introduction {
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C0C0C;
		line-height: 37rpx;
		margin-bottom: 20rpx;
	}

	.functions {
		width: 100%;
		height: 62rpx;
		background: #FEF9F3;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.functions .item {
		display: flex;
		align-items: center;
	}

	.icon-checked {
		margin-right: 8rpx;
	}

	.icon-location {
		margin-right: 2rpx;
	}

	.functions .item .text {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5E523F;
		line-height: 37rpx;
	}

	.bgm {
		height: 20rpx;
		background: #EFEFEF;
	}

	.service {
		height: 100%;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #040404;
		line-height: 42rpx;
		border-bottom: 1rpx solid #E9E9E9;
		margin-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.tags {
		display: flex;
		justify-content: left;
		margin: 32rpx 0;
	}

	.tags .one {
		border-radius: 4rpx;
		padding: 10rpx 32rpx;
		font-size: 28rpx;
		background: #F5F5F5;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-right: 22rpx;
	}

	.tags .two {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #F5F5F5;
		border-radius: 8rpx;
		padding: 10rpx 32rpx;

		.timesvg {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.tags .two .text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0B0B0B;
	}

	.tagactive {
		background-color: #D6FFF9 !important;
		color: #01C3A8 !important;
	}

	.project {
		display: flex;
		justify-content: left;
		height: 100%;
		padding-bottom: 65rpx;
	}

	.project .left {
		width: 250rpx;
		height: 250rpx;
		border-radius: 8rpx;
		border-radius: 8rpx;
		margin-right: 22rpx;
	}

	.project .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.project .right .top .top1 {
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #0B0B0B;
		line-height: 42rpx;
	}

	.project .right .top .top2 {
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #868686;
		line-height: 37rpx;
		margin: 10rpx 0;
	}

	.project .right .top .top3 {
		height: 30rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E0B361;
		line-height: 30rpx;
	}

	.project .right .bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.project .right .bottom .left {
		height: 48rpx;
		line-height: 48rpx;
	}

	.project .right .bottom .left .left1 {
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E02724;
		line-height: 48rpx;
		letter-spacing: 1px;
	}

	.project .right .bottom .left .left2 {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E02724;
		line-height: 28rpx;
	}

	.project .right .bottom .right {
		width: 134rpx;
		height: 58rpx;
		background: #01C3A8;
		border-radius: 29rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F5FFFE;
		line-height: 58rpx;
		text-align: center;
	}

	.projecttwo {
		// height: 400rpx;
		// padding: 20rpx;
	}
</style>
